<template>
    <div>
        <!-- 面包屑导航 -->
        <div class="page_top">
            <div class="left_btn" @click="back">
                <el-icon>
                    <Back />
                </el-icon>
            </div>
            <crumbs basetitle="客户" title="离职成员"></crumbs>
        </div>
        <div class="paddingbox">
            <el-card>
                <div class="screen">
                    <span class="bord">离职成员</span>
                </div>
                <div class="screen_condition">
                    <div class="formbox">
                        <div class="flex items-center">
                            <span class="flex-no-shrink">所属分组：</span>
                            <select-dept v-model:value="ssfz" @change="changessfz"></select-dept>
                            <!-- <el-cascader @change="changessfz" clearable v-model="ssfz" :props="props" :options="fzlist">
                                <template #default="{ node, data }">
                                    <span>{{ data.label }}</span>
                                </template>
                            </el-cascader> -->
                        </div>
                        <div class="flex items-center">
                            <span class="flex-no-shrink">离职日期：</span>
                            <el-date-picker v-model="lzdate" @change="changelzdate" type="daterange"
                                value-format="YYYY-MM-DD" range-separator="至" start-placeholder="开始时间"
                                end-placeholder="结束时间" />
                        </div>
                    </div>
                </div>
            </el-card>
            <el-card style="margin-top: 16px;">
                <el-table :data="tableData" ref="multipleTableRef" style="width: 100%" :header-cell-style="{
                    background: '#FAFAFC',
                    color: '#202536',
                }">
                    <el-table-column prop="salesName" label="离职成员" />
                    <el-table-column prop="deptName" label="所属分组" />
                    <el-table-column prop="roleName" label="角色权限" />
                    <el-table-column prop="allocateAmt" label="分配客户数" />
                    <el-table-column prop="unAllocateAmt" label="未分配客户数">
                        <template #default="scope">
                            <span v-if="scope.row.unAllocateAmt === 0 || scope.row.unAllocateAmt === null || scope.row.unAllocateAmt ===
                                ''">--</span>
                            <span style="color: #FF7642;" v-else>{{
                                scope.row.unAllocateAmt
                            }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="updateTime" label="离职时间">
                        <template #default="scope">
                            <div>
                                {{ scope.row.updateTime ? scope.row.updateTime.slice(0, 10) : '--' }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="updateUserName" label="操作人" />
                    <el-table-column prop="address" label="操作">
                        <template #default="scope">
                            <div class="flexbox">
                                <div class="pointer blue" @click="openfpjltc(scope.row)">
                                    分配记录
                                </div>
                                <div class="pointer blue" style="margin-left: 12px;" v-show="scope.row.UnAllocateAmt === 0 || scope.row.UnAllocateAmt === null || scope.row.UnAllocateAmt ===
                                    ''" @click="openfptc(scope.row)">
                                    去分配
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination :total="total" :currentPage="pagenum" :pageSize="pagesize" @SizeChange="changepagesize"
                    @CurrentChange="changepagenum"></pagination>
            </el-card>
        </div>
        <!-- 分配记录弹窗 -->
        <el-dialog v-model="fpjltc" title="分配记录详情" width="460">
            <div class="flexbox">
                <div> <el-input v-model="khmc" placeholder="请输入客户名称" @input="changekhmc" :prefix-icon="Search" /></div>
                <div style="margin-left: 10px;">
                    <el-select v-model="saleer" filterable placeholder="请选择" clearable @change="getallocaterecord">
                        <el-option v-for="item in salelist" :key="item.saleId" :label="item.saleName"
                            :value="item.saleId" />
                    </el-select>
                </div>
            </div>
            <el-table :data="gridData" height="500">
                <el-table-column property="companyName" width="200" label="分配公司名称" />
                <el-table-column property="productTypeName" label="产品" />
                <el-table-column property="salesName" label="接收人" />
            </el-table>
            <div class="flexendbox" style="margin-top:10px;">
                <el-button class="my_cancelbtn" @click="cancel">取消</el-button>
                <el-button class="my_btn" @click="cancel">确定</el-button>
            </div>
        </el-dialog>
        <el-dialog v-model="plfptcagain" title="客户资源分配" width="612" @close="close">
            <div class="khzyfpbox">
                <div class="top">
                    <el-button @click="fpkh">分配给其他成员</el-button>
                    <div>共<span class="blue">{{ lzkhfplist.length }}位</span>客户</div>
                </div>
                <el-table ref="multipleTableRef" :data="lzkhfplist" :header-cell-style="{
                    background: '#FAFAFC',
                    color: '#202536',
                }" style="width: 100%;margin-top: 12px;" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" />
                    <el-table-column property="companyName" label="客户资源名称" />
                    <el-table-column property="productTypeName" label="产品" />
                </el-table>
                <div style="margin-top: 24px;">已选中{{ ywarr.length }}位客户</div>
            </div>
        </el-dialog>
        <el-dialog v-model="changesalertc" title="选择分配销售" width="500">
            <div class="changeoraddsalerbox">
                <div class="lable">销售名称</div>
                <div class="lablecontent">
                    <el-select v-model="changeaslervalue" filterable placeholder="请选择">
                        <el-option :disabled="disablesaleis === item.id" v-for="item in salerlist" :key="item.id"
                            :label="item.salesName" :value="item.id" />
                    </el-select>
                </div>
            </div>
            <div class="flexcenterbox" style="margin-top: 16px;">
                <el-button class="my_btn" @click="changesalersure">确定</el-button>
                <el-button class="my_cancelbtn" @click="changesalercancel">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, watch, onMounted, onActivated } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
import { getallsellerapi } from '../../api/api'
import { getdmslistapi, getdepartmentapi, getproductbysaleapi, changedealallocateapi, getallocaterecordapi } from '../../api/api'
import { ElMessage } from 'element-plus'
import { shake } from '../../utils/utils'
const router = useRouter()
const route = useRoute()
const lzdate = ref<any>([])
const ssfz = ref('')
const changesalertc = ref(false)
const fzlist = ref<any>([])
const total = ref(10)
const pagenum = ref(1)
const pagesize = ref(10)
const khmc = ref('')
const salelist = ref<any>([])
const saleer = ref<any>(null)
const getdepartment = () => {
    getdepartmentapi().then((res: any) => {
        fzlist.value = res
    })
}
const getallocaterecord = () => {
    getallocaterecordapi({
        saleOldId: disablesaleid.value,
        saleId: saleer.value,
        companyName: khmc.value,
    }).then((res: any) => {
        console.log(res, '分配记录')
        gridData.value = res
    })
}
const changekhmc = (val: any) => {
    console.log(val)
    shake(getallocaterecord, 400)
}
const plfptcagain = ref(false)
const handleSelectionChange = (val: any) => {
    console.log(val)
    ywarr.value = val
}
const fpkh = () => {
    getallsellerapi().then((res: any) => {
        console.log(res, '销售')
        salerlist.value = res
    })
    if (ywarr.value.length === 0) {
        ElMessage({
            message: '请选择要分配的客户',
            type: 'warning'
        })
        return
    }
    changesalertc.value = true
    changeaslervalue.value = null
}
const close = () => {
    getdmslist()
    getdepartment()
}
const openfptc = (val: any) => {
    console.log(val)
    disablesaleis.value = val.id
    getproductbysale(val.id)
    plfptcagain.value = true
}
const salerlist = ref<any>([])
const changesalersure = () => {
    const y = new Date().getFullYear()
    const m =
        new Date().getMonth() + 1 >= 10
            ? new Date().getMonth() + 1
            : + new Date().getMonth() + 1
    if (changeaslervalue.value === null || '') {
        ElMessage({
            message: '请选择销售',
            type: 'warning'
        })
        return
    }
    const arr: any = []
    ywarr.value.forEach((ele: any, index: any) => {
        arr.push(ele.companyId)
    })
    changedealallocateapi({
        saleId: changeaslervalue.value,
        saleOldId: disablesaleis.value,
        companyIds: arr,
        serviceStartTime: `${y}-${m >= 10 ? m : '0' + m}-01`,
    }).then((res: any) => {
        console.log(res)
        if (res.code === 200) {
            ElMessage({
                message: '修改成功',
                type: 'success'
            })
            changeaslervalue.value = null
            changesalertc.value = false
            getproductbysale(disablesaleis.value)
        }
    })
}
const disablesaleis = ref<any>(null)
const ywarr = ref([])
const getproductbysale = (id: any) => {
    getproductbysaleapi(id).then((res: any) => {
        console.log(res, 'resresres')
        lzkhfplist.value = res
    })
}
const lzkhfplist = ref<any>([])
const changesalercancel = () => {
    changesalertc.value = false
    changeaslervalue.value = null
}
const changeaslervalue = ref<any>(null)
const changelzdate = (val: any) => {
    getdmslist()
}
const changessfz = (val: any) => {
    console.log(val)
    getdmslist()
}
const getdmslist = () => {
    getdmslistapi({
        pageSize: pagesize.value,
        pageNum: pagenum.value,
        auditStatus: 2,
        startTime: lzdate.value !== null && lzdate.value[0] ? lzdate.value[0] : '',
        endTime: lzdate.value !== null && lzdate.value[1] ? lzdate.value[1] : '',
        deptId: ssfz.value
    }).then((res: any) => {
        console.log(res, '离职人员列表')
        tableData.value = res.rows
        total.value = res.total
    })
}
const props = {
    expandTrigger: 'hover' as const,
    label: 'label',
    value: 'id',
}
onMounted(() => {
    getdmslist()
    getdepartment()
})
onActivated(() => {
    getdmslist()
    getdepartment()
})
const cancel = () => {
    fpjltc.value = false
    khmc.value = ''
    saleer.value = null
}
const changepagesize = (val: number) => {
    pagesize.value = val
    pagenum.value = 1
    getdmslist()
}
const changepagenum = (val: number) => {
    pagenum.value = val
    getdmslist()
}
const openfpjltc = (val: any) => {
    disablesaleid.value = val.id
    getallsellerapi().then((res: any) => {
        console.log(res, '销售')
        salelist.value = res
    })
    getallocaterecord()
    fpjltc.value = true
}
const disablesaleid = ref<any>(null)
const fpjltc = ref(false)
const tableData = ref([])
const gridData = ref([])
const back = () => {
    window.history.back()
}
</script>

<style lang="scss" scoped>
.paddingbox {
    width: 100%;
    box-sizing: border-box;
    padding: 16px;
}

.screen_condition {
    box-sizing: border-box;
    padding: 0 20px;
    margin-top: 16px;

    .formbox {
        margin-top: 16px;
        width: 100%;
        // box-sizing: border-box;
        // display: flex;
        // align-items: center;
        // justify-content: space-between;
        // gap: 30px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;

        div {
            // flex: 1;
            // padding-right: 30px;
            // box-sizing: border-box;
        }
    }
}

.screen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    border-bottom: 2px solid #f4f4f7;

    .deleate {
        cursor: pointer;
        display: flex;
        align-items: center;
    }

    .bord {
        font-weight: 700;
    }

    img {
        margin-right: 10px;
        margin-top: 5px;
    }

    .clear {
        color: rgba(148, 151, 177, 1);
        font-size: 14px;
    }
}

.utilsbox {
    display: flex;
    align-items: center;

    .deleate {
        margin-right: 10px;
    }
}

.blue {
    color: #3E5FF5;
}

.khzyfpbox {
    margin-top: -20px;
    border-top: 1px solid #F4F4F7;
    padding: 16px 0;

    .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

.changeoraddsalerbox {
    display: flex;
    align-items: center;
    justify-content: center;

    .lable {
        margin-right: 16px;
    }
}
</style>